<template>
  <div class="group-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ $t('group.title') }}</span>
        <el-button 
          style="float: right; padding: 3px 0" 
          type="text" 
          icon="el-icon-plus" 
          @click="handleAdd"
          v-if="isAdmin">
          {{ $t('group.add') }}
        </el-button>
      </div>
      
      <!-- 搜索条件 -->
      <div class="search-container">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item :label="$t('group.name')">
            <el-input v-model="searchForm.groupName" :placeholder="$t('group.name')" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchGroups">{{ $t('common.search') }}</el-button>
            <el-button @click="resetSearch">{{ $t('common.reset') }}</el-button>
            <el-button type="success" @click="exportGroups">
              <i class="el-icon-download"></i> {{ $t('group.exportGroups') }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 数据表格 -->
      <div class="table-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column :prop="'name'" :label="$t('group.name')" width="200"></el-table-column>
          <el-table-column :prop="'num'" :label="$t('group.num')" width="120"></el-table-column>
          <el-table-column :prop="'lastOperator'" :label="$t('group.lastOperator')" width="150" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column :label="$t('group.lastOperatorTime')" width="180" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ formatDateTime(scope.row.lastOperatorTime) }}
            </template>
          </el-table-column>
          <el-table-column :prop="'remark'" :label="$t('common.remark')" :show-overflow-tooltip="true"></el-table-column>
          
          <!-- PC端操作列 -->
          <el-table-column :label="$t('common.operation')" width="280" fixed="right" v-if="!isMobile">
            <template slot-scope="scope">
              <el-button 
                type="text" 
                size="small" 
                @click="handleDetail(scope.row)">
                {{ $t('common.detail') }}
              </el-button>
              <el-button 
                type="primary" 
                size="mini" 
                @click="handleEdit(scope.row)"
                v-if="canManageGroup(scope.row)">
                {{ $t('common.edit') }}
              </el-button>
              <el-popconfirm 
                :title="$t('group.deleteConfirm')" 
                @confirm="handleDelete(scope.row)">
                <el-button 
                  type="danger" 
                  size="mini" 
                  slot="reference"
                  :disabled="scope.row.id === 0"
                  v-if="canManageGroup(scope.row)">
                  {{ $t('common.delete') }}
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
          
          <!-- 移动端操作列 -->
          <el-table-column :label="$t('common.operation')" width="100" fixed="right" v-if="isMobile">
            <template slot-scope="scope">
              <el-popover
                placement="left"
                width="160"
                trigger="click">
                <div class="mobile-operation-buttons">
                  <el-button 
                    type="text" 
                    size="mini" 
                    @click="handleDetail(scope.row)">
                    <i class="el-icon-view"></i> {{ $t('common.detail') }}
                  </el-button>
                  <el-button 
                    type="text" 
                    size="mini" 
                    @click="handleEdit(scope.row)"
                    v-if="canManageGroup(scope.row)">
                    <i class="el-icon-edit"></i> {{ $t('common.edit') }}
                  </el-button>
                  <el-popconfirm 
                    :title="$t('group.deleteConfirm')" 
                    @confirm="handleDelete(scope.row)">
                    <el-button 
                      type="text" 
                      size="mini" 
                      slot="reference"
                      :disabled="scope.row.id === 0"
                      v-if="canManageGroup(scope.row)"
                      class="delete-button">
                      <i class="el-icon-delete"></i> {{ $t('common.delete') }}
                    </el-button>
                  </el-popconfirm>
                </div>
                <el-button slot="reference" type="primary" size="mini">
                  {{ $t('common.operation') }} <i class="el-icon-arrow-down"></i>
                </el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            :layout="paginationLayout"
            :total="pagination.total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    
    <!-- 编辑/添加对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :width="isMobile ? '90%' : '500px'" :fullscreen="isMobile">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item :label="$t('group.name')" prop="name">
          <el-input v-model="form.name" :placeholder="$t('group.name')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('group.num')" prop="num">
          <el-input-number v-model="form.num" :min="0" :max="200"></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('common.remark')" prop="remark">
          <el-input type="textarea" v-model="form.remark" :rows="3" :placeholder="$t('common.remark')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
    
    <!-- 班级详情对话框 -->
    <el-dialog :title="$t('common.detail')" :visible.sync="detailDialogVisible" :width="isMobile ? '90%' : '800px'" :fullscreen="isMobile">
      <el-tabs v-model="activeTab">
        <el-tab-pane :label="$t('group.info')" name="info">
          <el-table :data="[detailForm]" border style="width: 100%">
            <el-table-column label="ID" prop="id" width="120"></el-table-column>
            <el-table-column :label="$t('group.name')" prop="name" width="200"></el-table-column>
            <el-table-column :label="$t('group.num')" prop="num" width="120"></el-table-column>
            <el-table-column :label="$t('group.lastOperator')" prop="lastOperator" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column :label="$t('group.lastOperatorTime')" width="180" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ formatDateTime(scope.row.lastOperatorTime) }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('common.remark')" prop="remark" :show-overflow-tooltip="true"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('group.students')" name="students">
          <div class="students-header">
            <el-button 
              type="success" 
              size="small" 
              @click="exportStudents" 
              v-if="students.length > 0"
              class="export-button">
              <i class="el-icon-download"></i> {{ $t('group.exportStudents') }}
            </el-button>
          </div>
          <el-table
            :data="students"
            border
            style="width: 100%"
            v-loading="studentsLoading">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column :prop="'name'" :label="$t('group.studentName')" width="120"></el-table-column>
            <el-table-column :prop="'telephone'" :label="$t('group.telephone')" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column :prop="'mail'" :label="$t('group.email')" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column :label="$t('common.status')" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                  {{ scope.row.status === 1 ? $t('common.normal') : $t('common.frozen') }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column :label="$t('group.lastLoginTime')" width="180" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ formatDateTime(scope.row.lastTime) }}
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              @size-change="handleStudentsSizeChange"
              @current-change="handleStudentsCurrentChange"
              :current-page="studentsPagination.currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="studentsPagination.pageSize"
              :layout="paginationLayout"
              :total="studentsPagination.total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('group.attendance')" name="attendance">
          <div id="attendanceChart" class="chart"></div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { exportFile } from '@/utils/exportHelper';

export default {
  name: "Group",
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem("userInfo") || "{}"),
      isAdmin: false,
      isTeacher: false,
      loading: false,
      submitLoading: false,
      isMobile: false,
      exporting: false, // 导出状态
      paginationLayout: "total, sizes, prev, pager, next, jumper",
      
      // 搜索表单
      searchForm: {
        groupName: ''
      },
      
      // 表格数据
      tableData: [],
      
      // 分页
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      
      // 对话框
      dialogVisible: false,
      dialogTitle: '添加班级',
      form: {
        id: null,
        name: '',
        num: 0,
        lastOperator: '',
        remark: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入班级名称', trigger: 'blur' },
          { min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入班级人数', trigger: 'blur' }
        ]
      },
      
      // 详情对话框
      detailDialogVisible: false,
      activeTab: 'info',
      detailForm: {},
      
      // 班级学生
      students: [],
      studentsLoading: false,
      studentsPagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      
      // 图表实例
      chart: null
    }
  },
  created() {
    this.checkUserRole();
    this.searchGroups();
    this.checkScreenSize();
  },
  mounted() {
    window.addEventListener('resize', this.checkScreenSize);
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
    window.removeEventListener('resize', this.checkScreenSize);
  },
  methods: {
    checkScreenSize() {
      this.isMobile = document.body.clientWidth < 768;
      this.paginationLayout = this.isMobile ? "prev, pager, next" : "total, sizes, prev, pager, next, jumper";
    },
    checkUserRole() {
      if (this.userInfo && this.userInfo.roleName) {
        this.isAdmin = this.userInfo.roleName.includes('admin');
        this.isTeacher = this.userInfo.roleName.includes('teacher');
      }
    },
    getDefaultForm() {
      return {
        id: null,
        name: '',
        num: 0,
        lastOperator: this.userInfo?.name || '',
        remark: ''
      };
    },
    async searchGroups() {
      this.loading = true;
      try {
        let res;
        if (this.isAdmin) {
          // 管理员获取所有班级
          const params = {
            page: this.pagination.currentPage,
            size: this.pagination.pageSize,
            name: this.searchForm.groupName || undefined
          };
          res = await this.$axios.get('/group/page', { params });
        } else if (this.isTeacher) {
          // 教师只获取自己的班级
          res = await this.$axios.get(`/group/teacher-groups/${this.userInfo.userId}`);
        }

        if (res.code === 200) {
          const data = res.data;
          this.tableData = this.isAdmin ? (data.records || []) : (data || []);
          this.pagination.total = this.isAdmin ? (data.total || 0) : (data.length || 0);
        } else {
          this.$message.error(res.msg || '获取班级列表失败');
        }
      } catch (err) {
        console.error('获取班级列表失败', err);
        this.$message.error('获取班级列表失败');
      } finally {
        this.loading = false;
      }
    },
    resetSearch() {
      this.searchForm = {
        groupName: ''
      };
      this.pagination.currentPage = 1;
      this.searchGroups();
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.searchGroups();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.searchGroups();
    },
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      return new Date(dateTime).toLocaleString();
    },
    handleAdd() {
      this.dialogTitle = this.$t('group.add');
      this.form = this.getDefaultForm();
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.dialogTitle = this.$t('common.edit');
      this.form = { ...row };
      this.dialogVisible = true;
    },
    handleDelete(row) {
      if (row.id === 0) {
        this.$message.warning('默认班级不能删除');
        return;
      }
      
      this.$axios.delete(`/group/${row.id}`).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功');
          this.searchGroups();
        } else {
          this.$message.error(res.msg || '删除失败');
        }
      }).catch(err => {
        console.error('删除班级失败', err);
        this.$message.error('删除班级失败');
      });
    },
    handleDetail(row) {
      this.detailForm = { ...row };
      this.activeTab = 'info';
      this.detailDialogVisible = true;
      
      // 重置学生分页
      this.studentsPagination = {
        currentPage: 1,
        pageSize: 10,
        total: 0
      };
      
      // 如果选择了学生标签页，加载学生数据
      if(this.activeTab === 'students') {
        this.getGroupStudents();
      }
    },
    canManageGroup(group) {
      if (this.isAdmin) return true;
      if (this.isTeacher && group.teacherId === this.userInfo.userId) return true;
      return false;
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          
          // 修改URL和请求方法
          const isUpdate = !!this.form.id;
          let url, method;
          
          if (isUpdate) {
            url = `/group/${this.form.id}`;
            method = 'put';
            
            // 确保保留表单中的相关字段，添加可能缺少的字段
            if (this.form.teacherId === undefined) {
              // 如果没有teacherId字段（编辑时可能没传），则从原始数据获取
              const originalGroup = this.tableData.find(g => g.id === this.form.id);
              if (originalGroup && originalGroup.teacherId) {
                this.form.teacherId = originalGroup.teacherId;
              }
            }
          } else {
            url = '/group/create';
            method = 'post';
          }
          
          this.$axios[method](url, this.form).then(res => {
            if (res.code === 200) {
              this.$message.success('操作成功');
              this.dialogVisible = false;
              this.searchGroups();
            } else {
              this.$message.error(res.msg || '操作失败');
            }
          }).catch(err => {
            console.error('操作失败', err);
            this.$message.error('操作失败');
          }).finally(() => {
            this.submitLoading = false;
          });
        } else {
          return false;
        }
      });
    },
    getGroupStudents() {
      if (!this.detailForm.id) return;
      
      this.studentsLoading = true;
      
      // 使用正确的API路径获取班级学生列表
      this.$axios.get(`/group/${this.detailForm.id}/students`).then(res => {
        if (res.code === 200) {
          this.students = res.data || [];
          this.studentsPagination.total = res.data.length || 0;
        } else {
          this.$message.error(res.msg || '获取班级学生失败');
        }
      }).catch(err => {
        console.error('获取班级学生失败', err);
        this.$message.error('获取班级学生失败');
      }).finally(() => {
        this.studentsLoading = false;
      });
    },
    handleStudentsSizeChange(val) {
      this.studentsPagination.pageSize = val;
      this.getGroupStudents();
    },
    handleStudentsCurrentChange(val) {
      this.studentsPagination.currentPage = val;
      this.getGroupStudents();
    },
    initAttendanceChart() {
      // 确保DOM元素已经渲染
      this.$nextTick(() => {
        const chartDom = document.getElementById('attendanceChart');
        if (!chartDom) return;
        
        if (this.chart) {
          this.chart.dispose();
        }
        this.chart = echarts.init(chartDom);
      });
    },
    getGroupAttendance() {
      if (!this.detailForm.id) return;
      
      // 使用正确的考勤统计API
      this.$axios.get(`/statistics/attendance/group/${this.detailForm.id}`).then(res => {
        if (res.code === 200) {
          // 获取班级每日考勤统计数据
          const statsData = res.data;
          if (statsData) {
            // 统计有记录的数据构建图表
            this.updateAttendanceChartFromStats(statsData);
          } else {
            this.$message.warning('暂无考勤统计数据');
          }
        } else {
          this.$message.error(res.msg || '获取班级考勤统计失败');
        }
      }).catch(err => {
        console.error('获取班级考勤统计失败', err);
        this.$message.error('获取班级考勤统计失败');
      });
    },
    // 更新考勤统计图表(根据统计数据)
    updateAttendanceChartFromStats(statsData) {
      if (!this.chart) return;
      
      // 基本考勤数据
      const statusNames = [
        this.$t('attendance.normal'), 
        this.$t('attendance.late'), 
        this.$t('attendance.earlyLeave'), 
        this.$t('attendance.absent'), 
        this.$t('attendance.leave')
      ];
      const statusCounts = [
        statsData.normalCount || 0,
        statsData.lateCount || 0, 
        statsData.earlyLeaveCount || 0,
        statsData.absentCount || 0,
        statsData.leaveCount || 0
      ];
      
      // 设置图表选项
      const option = {
        title: {
          text: this.$t('group.attendanceStats'),
          subtext: `${this.$t('group.attendanceRate')}: ${statsData.attendanceRate || 0}%`,
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: 10,
          data: statusNames
        },
        series: [
          {
            name: this.$t('group.attendance'),
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: statusNames.map((name, index) => {
              return {
                name: name,
                value: statusCounts[index]
              };
            })
          }
        ]
      };
      
      this.chart.setOption(option);
    },
    updateAttendanceChart(data) {
      if (!this.chart) return;
      
      // 如果数据为空，显示空状态
      if (!data || !data.length) {
        this.chart.setOption({
          title: {
            text: `${this.$t('group.attendanceStats')} ${this.$t('group.noData')}`,
            left: 'center'
          }
        });
        return;
      }
      
      const dates = data.map(item => item.date);
      const normalData = data.map(item => item.normal);
      const lateData = data.map(item => item.late);
      const earlyData = data.map(item => item.early);
      const absentData = data.map(item => item.absent);
      
      const option = {
        title: {
          text: this.$t('group.attendanceStats'),
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: [
            this.$t('attendance.normal'), 
            this.$t('attendance.late'), 
            this.$t('attendance.earlyLeave'), 
            this.$t('attendance.absent')
          ],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: this.$t('attendance.normal'),
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: normalData
          },
          {
            name: this.$t('attendance.late'),
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: lateData
          },
          {
            name: '早退',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: earlyData
          },
          {
            name: '旷课',
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            data: absentData
          }
        ]
      };
      
      this.chart.setOption(option);
    },
    // 导出班级数据
    exportGroups() {
      let params = {};
      let url = '/group/export';
      
      // 教师只能导出自己的班级
      if (!this.isAdmin && this.isTeacher) {
        if (this.userInfo && this.userInfo.userId) {
          url = `/group/export/teacher/${this.userInfo.userId}`;
        } else {
          this.$message.warning('无法获取用户信息');
          return;
        }
      } else {
        // 管理员按搜索条件导出
        if (this.searchForm.groupName) {
          params.groupName = this.searchForm.groupName;
        }
      }
      
      exportFile({
        url: url,
        params,
        defaultFileName: this.$t('group.title'),
        beforeExport: () => {
          this.exporting = true;
        },
        afterExport: () => {
          this.exporting = false;
        },
        onError: (error) => {
          console.error(this.$t('common.operationFailed'), error);
          this.$message.error(this.$t('common.operationFailed'));
        },
        fileType: 'csv',
        getCustomFileName: () => {
          // 生成自定义文件名
          const now = new Date();
          const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
          let fileName = `${this.$t('group.title')}_${dateStr}`;
          
          // 如果有搜索条件，添加到文件名中
          if (this.isAdmin && this.searchForm.groupName) fileName += `_${this.searchForm.groupName}`;
          
          return fileName;
        }
      });
    },
    
    // 导出班级学生名单
    exportStudents() {
      if (!this.detailForm.id) {
        this.$message.warning(this.$t('group.selectFirst'));
        return;
      }
      
      exportFile({
        url: `/group/${this.detailForm.id}/export-students`,
        params: {},
        defaultFileName: `${this.detailForm.name}_${this.$t('group.students')}`,
        beforeExport: () => {
          this.exporting = true;
        },
        afterExport: () => {
          this.exporting = false;
        },
        onError: (error) => {
          console.error(this.$t('common.operationFailed'), error);
          this.$message.error(this.$t('common.operationFailed'));
        },
        fileType: 'csv',
        getCustomFileName: () => {
          const now = new Date();
          const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
          return `${this.detailForm.name}_${this.$t('group.students')}_${dateStr}`;
        }
      });
    },
    handleTabChange(tab) {
      if (tab.name === 'students') {
        this.getGroupStudents();
      } else if (tab.name === 'attendance') {
        this.initAttendanceChart();
        this.getGroupAttendance();
      }
    }
  },
  watch: {
    activeTab(newVal) {
      if (newVal === 'students') {
        this.getGroupStudents();
      } else if (newVal === 'attendance') {
        this.initAttendanceChart();
        this.getGroupAttendance();
      }
    }
  }
}
</script>

<style scoped>
.group-container {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.table-container {
  margin-top: 20px;
  width: 100%;
  overflow-x: auto;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.chart {
  width: 100%;
  height: 400px;
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-table {
  margin-bottom: 20px;
}

.el-tabs__header {
  margin-bottom: 25px;
}

.mobile-operation-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mobile-operation-buttons .el-button {
  margin-left: 0;
  margin-bottom: 8px;
  width: 100%;
  text-align: left;
}

.mobile-operation-buttons .el-button:last-child {
  margin-bottom: 0;
}

.mobile-operation-buttons .delete-button {
  color: #F56C6C;
}

@media screen and (max-width: 768px) {
  .group-container {
    padding: 10px;
  }
  
  .search-form {
    display: flex;
    flex-direction: column;
  }
  
  .search-form .el-form-item {
    margin-right: 0;
  }
  
  .el-pagination {
    white-space: normal;
    display: flex;
    justify-content: center;
  }
  
  .el-table {
    width: 100%;
    font-size: 12px;
  }
  
  .chart {
    height: 300px;
  }
}
</style>